<template>
    <div>
        <h1>科室列表</h1>

        <div>
            科室名称
            <input type="text" v-model="queryInfo.wardName">

            <input type="button" value="查询" class="btn btn-info" @click="getWard">
        </div>

        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>科室编号</td>
                    <td>科室名称</td>
                    <td>科室照片</td>
                    <td>成立日期</td>
                </tr>

                <tr v-for="item in data" :key="item.WardId">
                    <td>{{ item.WardId }}</td>
                    <td>{{ item.WardName }}</td>
                    <td><img :src="item.WardPhoto" alt="" width="100px" height="100px"></td>
                    <td>{{ moment(item.CreateTime).format('YYYY-MM-DD') }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive,onMounted } from 'vue';
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router';
import moment from 'moment';

//传递参数
const route=useRoute();
//跳转页面
const router=useRouter();

//声明一个变量接收前端传递的参数
let queryInfo:any=reactive({
    wardName:''
})

//声明一个变量接收向后端传递的值
let data:any=ref([])

//生命周期钩子
onMounted(()=>{
    getWard()
})

//显示科室列表
const getWard=()=>{
    axios({
        url:'/api/Ward/ShowWard',
        method:'get',
        params:queryInfo
    })
    .then(res=>{
        console.log(res);
        data.value=res.data
    })
    .catch(err=>{
        console.log(err);
        
    })
}
</script>

<style scoped>
input{
    margin: 0 10px;
}
</style>